<template>
  <div class="footer-content">
    <div class="img-list">
      <div class="qrcode">
        <div>
          <el-image class="imgstyle" :src="lightercode" fit="cover" />
        </div>
        <div class="qrfont">微信公众号<br> 立即关注</div>
      </div>
      <div class="qrcode">
        <div>
          <el-image class="imgstyle" :src="ceoercode" fit="cover" />
        </div>
        <div class="qrfont">创始人微信<br> 立即咨询</div>
      </div>
    </div>
    <div class="floor-right">
      <div class="find-us">
        <div class="top-font">找到我们</div>
        <div class="font-base dot-style" style="margin-top: 3rem;">上海 / 闵行区新龙路1333弄万科国际28幢511-516</div>
        <div class="font-base dot-style" style="margin-top: 1rem;">济南 / 高新区颖秀路2600号山东大学科技产业园内</div>
        <div class="font-base dot-style" style="margin-top: 1rem;">北京 / 朝阳区百字湾路今日美术馆东侧</div>

      </div>
      <div>
        <div class="swhz-part" style="padding-top: 9rem;">
          <div>
            <div class="top-font">商务合作</div>
            <div class="cont-part">
              <div class="font-base">4000-662-169</div>
              <div class="font-base">+86 18810111677</div>
              <div class="font-base" style="font-family: BebasFontEn">light_brand@163.com</div>
              <div class="font-base">+86 15168883633</div>
            </div>


          </div>
          <div class="">
            <div class="top-font" style="padding-top: 9rem;">关注我们</div>
            <div class="icon-list">
              <iconMobel @click="goToExternalSite('xhs')" :baseImg="xhs" :activeImg="xhsactive" />
              <iconMobel @click="goToExternalSite('zcool')" :baseImg="zcool" :activeImg="zcoolactive" />
              <iconMobel @click="goToExternalSite('gtn')" :baseImg="gtn" :activeImg="gtnacrive" />
              <iconMobel @click="goToExternalSite('be')" :baseImg="be" :activeImg="beactive" />
            </div>
          </div>
        </div>
        <div class="font-basel" style="padding-top: 9rem;">京ICP备18030404号-1</div>
        <div class="about-web" style="padding-top: 1rem;padding-bottom: 3rem;">® 2021-2025 LIGHT BRANDING. Rights
          Reserved by LIGHT BRANDING.</div>
      </div>
    </div>
  </div>
</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";
import lightercode from "@/assets/imgs/lightercode.png"
import ceoercode from "@/assets/imgs/ceoercode.png"

import xhs from "@/assets/imgs/xhsb.png";
import xhsactive from "@/assets/imgs/xhsactiveb.png";
import zcool from "@/assets/imgs/zcoolb.png";
import zcoolactive from "@/assets/imgs/zcoolactiveb.png";
import gtn from "@/assets/imgs/gtnb.png";
import gtnacrive from "@/assets/imgs/gtnacriveb.png";
import be from "@/assets/imgs/beb.png";
import beactive from "@/assets/imgs/beactiveb.png";

import iconMobel from "@/components/iconMobel.vue"
export default {
  name: 'LightWebListBody',
  components: {
    iconMobel,
    scrollHandle
  },
  data() {
    return {
      lightercode: lightercode,
      ceoercode: ceoercode,
      xhs: xhs,
      xhsactive: xhsactive,
      zcool,
      zcoolactive,
      gtn,
      gtnacrive,
      be,
      beactive,

    };
  },

  mounted() {

  },

  methods: {
    goToExternalSite(val) {
      let _url = ''
      switch (val) {
        case 'xhs':
        _url = 'https://www.xiaohongshu.com/user/profile/5c3a0c0300000000050318f8?xsec_token=ABegkCwP6AvD0hi1qeMZurmw2G03jwdcSRAUMYzuAm9LQ=&xsec_source=pc_search';
          break;
        case 'zcool':
        _url= 'https://www.zcool.com.cn/u/24556197';
          break;
        case 'gtn':
        _url = 'https://www.gtn9.com/user_center.aspx?categories=0&subclass=0&id=40B7C9BD5A23F45E';
          break;
        case 'be':
        _url = 'https://www.behance.net/light15';
          break;
      }
      window.open(_url, '_blank');
    }
  },
};
</script>
<style lang="scss" scoped>
.footer-content {
  width: 100%;
  padding: 0 2rem;
  background-color: #fff;
  font-family: 'BebasFont';
}

.imgstyle {
  width: 17rem;
  height: 17rem;
}

.img-list {
  width: 100%;
  display: flex;
  padding-top: 5rem;
}

.qrcode {
  margin-right: 4rem;
  text-align: left;
}

.qrfont {
  padding-top: 1rem;
  font-size: 2.8rem;
  color: #000;
  text-align: center;
}

.floor-right {
  display: grid;
  padding-top: 9rem;
  color: #000;
  text-align: left;
}

.find-us {
  font-size: 2.8ren;
}

.top-font {
  font-size: 4.3rem;
  color: #000;
}

.font-base {
  font-size: 2.6rem;
}

.font-basel {
  font-size: 2.2rem;
}

.swhz-part {}

.about-web {
  font-size: 1.8rem;
  font-family: BebasFontEn
}

.icon-list {
  padding-top: 3rem;
  display: flex;
  grid-gap: 1.8rem;
}

.dot-style {
  position: relative;
  padding-left: 3rem;
}
.cont-part{
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
.dot-style::before {
  content: '';
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
</style>